<template>
  <div class="home">
    <!-- 输入框 -->

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="(item,index) in imgs" :key="index">
  <img :src="item" alt="">
  </van-swipe-item>

</van-swipe>
    <!-- 店铺列表          点击跳转到详情页-->
    <div class="shoplist">
        <div @click="toDetail(item)" class="shop" v-for="(item,index) in shoplist" :key="index">
        <div class="imgbox">
            <img :src="item.picUrl" alt="">
        </div>
        <div class="name">{{item.name}}</div>
        <div class="sale">☆{{item.wmPoiScore/10}} {{item.monthSalesTip}}</div>
        <div class="desc">{{item.minPriceTip}} {{item.shippingFeeTip}}</div>
        </div>
    </div>
  </div>
</template>

<script>
import { shop_list } from '../../utils/api'


export default {
    data(){
        return{

            shoplist:[],
            imgs:['https://img.zcool.cn/community/01b70e5b5ac3cca801215c8f1ae499.jpg%401280w_1l_2o_100sh.jpg',
                  'https://img95.699pic.com/photo/50075/0779.jpg_wh860.jpg',
                  'https://ts1.cn.mm.bing.net/th/id/R-C.e34b5fe45a4f0341ea85b6701c424cf2?rik=CiWj5okoexQe0g&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fphotoblog%2f1709%2f08%2fc2%2f58457620_1504833138909.jpg&ehk=YZtINlS9BC0UraY1k5A2wQHF0ckyTUcS2MBGiBlwTD4%3d&risl=&pid=ImgRaw&r=0']
            
        }
    },
    mounted(){
        shop_list().then((res)=>{
            console.log(res.data);
            this.shoplist = res.data.list
            // this.imgs.push(res.data.list.picUrl)
           
        })
    },
    methods:{
        toDetail(item){//跳转到详情页
            this.$router.push('/detail/'+item.mtWmPoiId)//斜杠要注意
        }
    }
}
</script>

<style lang="scss" scoped>
.shoplist{
  margin-bottom:50px;

  .shop{
    display: flex;
    margin: 10px 0;
    font-size: 12px;
    .imgbox{
      width: 80px;
      margin-right: 10px;
      img{
        width: 100%;
        height: 50px;
      }
    }
    
  }
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
  }
  .my-swipe .van-swipe-item img{
    width: 100%;
    height: 150px;
  }
</style>